<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">
    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    class App extends React.Component {
        state = {
            list: [{
                id: 1,
                name: "奔驰",
                date: new Date()
            }, {
                id: 2,
                name: "宝马",
                date: new Date()
            }, {
                id: 3,
                name: "法拉利",
                date: new Date()
            }, {
                id: 4,
                name: "劳斯莱斯",
                date: new Date()
            }],
            name: "",
            keyWords: ""
        }
        render() {
            let {name, list,keyWords } = this.state;
            return (
                <div>
                    <div>
                        id: <input type="text" disabled />
                        Name: <input type="text" value={name} onChange={(e) => {
                            this.setState({
                                name: e.target.value
                            })
                        }} />
                        <button onClick={() => this.add()}>添加</button>
                        搜索名称关键子：<input type="text" placeholder='请输入关键字' onChange={(e) => this.search(e)} />
                    </div>
                    <table border='1'>
                        <thead>
                            <tr>
                                <th>id</th>
                                <th>Name</th>
                                <th>Ctime</th>
                                <th>Operation</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                list.map((item, index) => {
                                    return (
                                        item.name.includes(keyWords) && <tr key={index}>
                                            <td>{item.id}</td>
                                            <td>{item.name}</td>
                                            <td>{item.date.toLocaleDateString()}</td>
                                            <td>
                                                <button onClick={() => this.remove(item.id)}>删除</button>
                                            </td>
                                        </tr>
                                    )
                                })
                            }
                        </tbody>
                    </table>
                </div>
            )
        }
        add() {
            let { name, list } = this.state;
            let date = new Date();
            let id = list[list.length - 1].id + 1;
            let obj = {
                name,
                date,
                id
            }
            
            list.push(obj)
            this.setState({
                list: list
            })
        }
        search(e) {
            let keyWord = e.target.value;
            this.setState({
                keyWords: keyWord
            })
        }
        remove(id) {
            let index = this.state.list.findIndex((item)=>{
                return item.id ===id;
            })
            this.state.list.splice(index,1);
            this.setState({
                list:this.state.list
            })
        }
    }

    ReactDOM.render(<App />, document.getElementById("root"))
</script>

</html>